{% extends '@AdsPlace/admin.twig' %}

{#内容部分#}
{% block content %}
   <div class="mod12">
       <div class="right-head">
            <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item >资源管理</el-breadcrumb-item>
             <el-breadcrumb-item>广告位</el-breadcrumb-item>
           </el-breadcrumb>
       </div>
       <div class="toolbar-btn-action">
           
           <div class="searchBox">
               
                    <el-input placeholder="请输入广告位名称或者广告位ID"
                     v-on:change="onKeywordChange"
                     v-model="keyword" class="input-with-select">
                     
                      <el-button slot="append" @click="onKeywordChange" icon="el-icon-search"></el-button>
                    </el-input>
                 
           </div>
       {# 功能按钮#}
           <el-button
           @click="OnOpenDrawer"
            type="primary" icon="el-icon-plus">新建广告位</el-button>
           
           <el-button-group>
                <el-button type="" @click="onStop"  :disabled="stopDisabled">停用</el-button>
                <el-button type=""  @click="onDelete" :disabled="delDisabled">删除</el-button>
                <el-button type=""  @click="onStart" :disabled="startDisabled">启用</el-button>
               <el-button type=""  @click="onGetCode"  :disabled="getCodeDisabled" >获取代码</el-button>
              </el-button-group>
           <el-button type="" @click="OnShowPlaceSearch" >
           筛选 <i ref="dropIcon" class="el-icon-caret-top"></i>
           <!-- el-icon-caret-bottom -->
           </el-button>
       </div>
       {# 这里是新增广告位   #}
       <el-drawer
          ref="newPlaceDrawer"
          title="新建广告位"
          :append-to-body="true"
          :visible.sync="drawerNewPlace"        
          :show-close="true"
          :before-close="handleDrawerClose"
          :wrapper-closable='false'
          :destroy-on-close="true"
          :with-header="true"
          size="85%">
           <div class="formBox" >
              <place-form
               :idplace="idPlace"
               v-on:onclosedrawer="onCloseDrawer"
              ></place-form>
           </div>
        </el-drawer>
   {# 筛选功能表单 class="rowbox" #}
   <el-card class="rowbox"   v-if="showPlaceSearch">  
      <transition name="fade">
        <place-search 
         v-on:onselectchange="onSelectChange"></place-search>
      </transition>  
  </el-card>

     {# 广告位列表组件 #}
     <table-adsplace-list 
         ref="tableAdsplaceList"
         :table-loading="tableLoading"
         v-on:onhandle-edit="handleEdit"
         v-on:onhandle-delete="handleDelete"
         v-on:handle-selection-change="handleSelectionChange"
         v-on:onhandle-getcode="handleGetcode"
         :tablelist="tablelist" >
      </table-adsplace-list>
      {# 分页组件 #}
      <div class="pagination" style="margin-left: -10px;">
         <el-pagination
               background
                  :page-size="pageSize"
               @current-change="handleCurrentChange"
               @size-change="handlePageSize"
               :page-sizes="[5,10,20,30,50,70,100]"
                  layout="prev, pager, next,total,jumper,sizes"
                  :total="total" :page-count="total" >
         </el-pagination>
      </div>
   {# table内容 #}

   <dialog-adsplace-code
    :visiable="dialogVisiable"
    :adsplace-code="adsplaceCode"
    v-on:on-close-dialog="onCloseDialog"></dialog-adsplace-code>
   {# 获取广告位代码的dialog #}
   </div>
{% endblock%}
{# 这里加入需要的vue组件js#}
{% block pagejs %}
 <script src="./plugins/AdsPlace/js/dist/index.js"></script> 
 <script src="./plugins/AdsPlace/js/page/place.js"></script>   
{% endblock%}